<template>
  <BaseCard>
    <div class="control">
      <el-button
        v-for="btn in layoutBtn"
        :key="btn.prop"
        @click="onGroupClick('a')"
        >{{ btn.label }}</el-button
      >
    </div>
    <RelationGraph ref="graphRef" :options="graphOptions">
      <div style="width: 300px; position: absolute; left: 0px; top: 0px">
        <div>Interest Groups</div>
        <div>
          <template v-for="group of interestGroups" :key="group.groupId">
            <div
              :id="'group-' + group.groupId"
              class="c-i-group"
              :class="{ 'c-i-group-checked': checkedGroupId === group.groupId }"
              @click="onGroupClick(group.groupId)"
            >
              <div class="c-i-name">{{ group.groupName }}</div>
            </div>
          </template>
        </div>
      </div>
      <template #canvas-plug>
        <div style="z-index: 10; position: absolute; left: -700px; top: 100px">
          <div class="canvas_wrap">
            <!-- display image -->
          </div>
          <div style="position: relative">
            <div
              id="location-a"
              class="c-i-location"
              :class="{ 'c-i-location-active': checkedGroupId === 'a' }"
              style="left: 260px; top: 300px"
              @click="onGroupClick('a')"
            >
              <el-icon :size="30" color="red">
                <component class="icons" is="edit"></component>
              </el-icon>
            </div>
          </div>
        </div>
      </template>
    </RelationGraph>
  </BaseCard>
</template>

<script setup>
import { onMounted, ref } from "vue";
import RelationGraph from "relation-graph/vue3";
const graphRef = ref("");
const layoutBtn = [
  { label: "树状布局", value: "tree" },
  { label: "中心布局", value: "center" },
  { label: "自动布局", value: "force" }
];
let checkedGroupId = ref("");
let checkedMemberId = ref("");
let interestGroups = ref([]);
let classMembers = ref([]);
let graphOptions = {
  allowSwitchLineShape: true,
  allowSwitchJunctionPoint: true,
  allowShowDownloadButton: true,
  defaultJunctionPoint: "border",
  placeOtherNodes: false,
  placeSingleNode: false,
  graphOffset_x: 200,
  graphOffset_y: -300,
  layout: {
    layoutName: "fixed"
  }
  // 这里可以参考"Graph 图谱"中的参数进行设置
};
onMounted(() => {
  showGraph();
});
function showGraph() {
  interestGroups = [{ groupId: "a", groupName: "Sports Group" }];
}
const layoutBtnClick = (btn) => {
  console.log(btn, "btn");
  options.layout.layoutName = btn.value;
  graphRef.value.getInstance().setOptions(options);
};
function onGroupClick(groupId) {
  console.log("onGroupClick");
  checkedMemberId = "";
  checkedGroupId = groupId;
  const htmlElementLines = [];
  htmlElementLines.push({
    from: "group-" + groupId,
    to: "location-" + groupId,
    color: "rgba(159,23,227,0.65)",
    lineWidth: 3,
    lineShape: 5,
    animation: 2
  });
  const graphInstance = graphRef.value.getInstance();
  graphInstance.clearElementLines();
  graphInstance.addElementLines(htmlElementLines);
}
const options = {
  layout: {
    from: "left",
    layoutName: "fixed",
    levelDistance: 100
  }
  // 这里可以参考"Graph 图谱"中的参数进行设置 https://seeksdream.github.io/#/docs/graph
};
</script>

<style scoped lang="less">
.c-i-group {
  background-color: rgba(159, 23, 227, 0.65);
  color: #ffffff;
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
  margin-top: 10px;
  cursor: pointer;
  :hover {
    opacity: 0.7;
  }
  .c-i-name {
    width: 100%;
  }
  .c-i-count {
    background-color: #ffffff;
    color: rgba(159, 23, 227, 0.65);
  }
}
.c-i-group-checked {
  transition: background-color 200ms ease, outline 200ms ease, color 200ms ease,
    -webkit-box-shadow 200ms ease;
  box-shadow: 0 0 0 8px rgba(159, 23, 227, 0.3);
}
.c-i-location {
  position: absolute;
  font-size: 40px;
  color: rgba(159, 23, 227, 0.65);
  width: 10px;
  height: 10px;
  cursor: pointer;
  overflow: visible;
  background-color: rgba(159, 23, 227, 0.65);
  border-radius: 50%;
  transition: background-color 200ms ease, outline 200ms ease, color 200ms ease,
    -webkit-box-shadow 200ms ease;
  box-shadow: 0 0 0 13px rgba(255, 255, 255, 0.5);
  animation: jumpingLocation 2s infinite;
  opacity: 0.5;
  span {
    position: absolute;
    margin-top: -40px;
    margin-left: -15px;
  }
  :hover {
    color: rgba(159, 23, 227, 1);
  }
}
.c-i-location-active {
  opacity: 1;
}
@keyframes jumpingLocation {
  0%,
  100% {
    color: rgba(159, 23, 227, 1); /* 初始和结束状态，元素不偏移 */
  }
  50% {
    color: rgb(245, 87, 29); /* 中间状态，元素向上偏移20像素 */
  }
}
.canvas_wrap {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 800px;
  width: 800px;
  background-image: url("@/assets/image/RenNing.png") norepeat;
}
</style>
